<!--
 * @Author: LuZeng
 * @Date: 2022-08-29 14:05:42
 * @LastEditTime: 2022-09-01 15:51:55
 * @LastEditors: LuZeng
 * @Description: 小白本白，写的不好多多包涵！！！
 * @FilePath: \jsd:\rjiananzhuang\WEB\WEB workspace\lot-music\src\views\Detail\SingerInfo.vue
 * 别乱动！
-->
<template>
  <div class="desc">
    <div class="item">
      <span class="tilte">歌手简介</span>
      <p class="briefDesc">{{ desc.briefDesc }}</p>
    </div>
    <div class="item" v-for="(item, index) in desc.introduction" :key="index">
      <span class="tilte">{{ item.ti }}</span>
      <p class="briefDesc">{{ item.txt }}</p>
    </div>
  </div>
</template>
<script>
import { getSingeDescAPI } from "@/api";
export default {
  name: "SingerInfo",
  data() {
    return {
      desc: {},
      singername: "",
    };
  },
  methods: {
    async getSingerInfo() {
      const res = await getSingeDescAPI({ id: this.id });
      this.desc = res.data;
      this.singername = this.desc.briefDesc.slice(0, 3);
    },
  },
  computed: {
    id() {
      return this.$route.query.id;
    },
  },
  created() {
    this.getSingerInfo();
  },
};
</script>

<style>
.desc {
  width: 95%;
  margin: 0 auto;
}
.tilte {
  display: block;
  font-weight: bold;
  font-size: 18px;
  margin-left: 8px;
  margin-top: 10px;
  color: #333;
}
.briefDesc {
  font-size: 16px;
  font-weight: lighter;
  text-indent: 24px;
  line-height: 2;
}
</style>